<template>
	<view class="container">
		<!-- 顶部标题栏 -->
		<!-- <view class="header-bag">
			<image src="/static/img/icon-Get-into@3.png" class="back" @click="goBack" mode="aspectFit"></image>
			<view class="header-center">
				<text>忘记支付密码</text>
			</view>
		</view> -->

		<!-- 页面内容 -->
		<view class="wrapper">
			<view class="change">
				<view class="cont">
					<!-- 手机号显示（隐藏） -->
					<view class="phone-display" style="display:none">
						<image src="/static/img/login/icon-iphone@2x.png" mode="aspectFit"></image>
						<input type="number" id="phone_pre" maxlength="11" placeholder="请输入手机号" v-model="userPhone"
							readonly />
					</view>

					<!-- 验证码提示 -->
					<view class="codeTip font15">
						<text>本次操作需要短信确认 </text>
						<text>验证码将发送至 : <text style="color:red">{{ maskedPhone }}</text></text>
						
					</view>

					<!-- 验证码输入 -->
					<view class="input-row">
						<image src="/static/img/login/icon-xinxi@2x.png" mode="aspectFit" class="input-icon"></image>
						<input type="number" id="verifyCode" placeholder="短信验证码" v-model="verifyCode" maxlength="6" />
						<button type="button" id="getVerify" @click="sendVerifyCode" :disabled="codeDisabled"
							class="verify-btn">
							{{ codeText }}
						</button>
					</view>
				</view>

				<!-- 下一步按钮 -->
				<button type="button" class="change_nex" @click="nextStep" :disabled="loading" :style="{'backgroundImage': `url(${serverAddress}img/login/Button-@2x.png)`}">
					{{ loading ? '验证中...' : '下一步' }}
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		commonApi,
		userApi
	} from '@/api/index.js';
	import {
		getCurrentUser
	} from '@/api/auth.js';
	import {
		inject
	} from 'vue'
	export default {
		data() {
			return {
				serverAddress: inject('$serverAddress'),
				userPhone: '',
				verifyCode: '',
				loading: false,
				codeDisabled: false,
				codeText: '发送验证码',
				countdown: 60,
				userInfo: null,
				lastLoginIp: '0.0.0.0'
			};
		},

		computed: {
			// 脱敏手机号显示
			maskedPhone() {
				if (this.userPhone && this.userPhone.length === 11) {
					return this.userPhone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
				}
				return this.userPhone;
			}
		},

		async onLoad() {
			// 获取用户信息
			this.userInfo = getCurrentUser();
			if (this.userInfo && this.userInfo.phone) {
				this.userPhone = this.userInfo.phone;
			}

			// 获取IP地址
			try {
				const ipResponse = await userApi.getIp();
				if (ipResponse && ipResponse.data) {
					this.lastLoginIp = ipResponse.data.ip || '0.0.0.0';
				}
			} catch (error) {
				console.error('获取IP失败:', error);
			}
		},

		methods: {
			// 发送验证码
			async sendVerifyCode() {
				if (!this.userPhone) {
					uni.showToast({
						title: '用户手机号未获取到',
						icon: 'none'
					});
					return;
				}

				this.codeDisabled = true;

				try {
					const response = await commonApi.sendPayPasswordCode({
						mobile: this.userPhone,
						last_login_ip: this.lastLoginIp
					});

					uni.showToast({
						title: response.msg || '验证码发送结果',
						icon: response.r === 0 ? 'success' : 'none'
					});

					if (response.r === 0) {
						this.startCountdown();
					} else {
						this.codeDisabled = false;
					}
				} catch (error) {
					console.error('发送验证码失败:', error);
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					});
					this.codeDisabled = false;
				}
			},

			// 开始倒计时
			startCountdown() {
				this.countdown = 60;
				this.codeText = `${this.countdown} 秒后重发`;

				const timer = setInterval(() => {
					this.countdown--;
					this.codeText = `${this.countdown} 秒后重发`;

					if (this.countdown <= 0) {
						clearInterval(timer);
						this.codeText = '重新发送';
						this.codeDisabled = false;
					}
				}, 1000);
			},

			// 下一步 - 验证验证码
			async nextStep() {
				if (!this.verifyCode) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return;
				}

				this.loading = true;

				try {
					const response = await userApi.checkMobileCode({
						mobile: this.userPhone,
						code: this.verifyCode,
						last_login_ip: this.lastLoginIp
					});

					uni.showToast({
						title: response.msg || '验证结果',
						icon: response.r === 0 ? 'success' : 'none'
					});

					if (response.r === 0) {
						// 验证成功，跳转到设置支付密码页面
						uni.navigateTo({
							url: '/pages/my/c-setPayPW'
						});
					}
				} catch (error) {
					console.error('验证失败:', error);
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					});
				} finally {
					this.loading = false;
				}
			},

			// 返回
			goBack() {
				uni.navigateBack();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		background-color: #F6F6F6;
	}

	.header-bag {
		box-sizing: border-box;
		width: 100%;
		height: 168rpx;
		line-height: 168rpx;
		padding: 0 56rpx;
		background-color: #FFFFFF;
		font-size: 76rpx;
		color: #656565;
		border-bottom: 2rpx solid #E6E6E6;
		position: relative;
	}

	.header-center {
		width: 100%;
		text-align: center;
		height: 168rpx;
		line-height: 168rpx;
	}

	.header-center text {
		font-size: 76rpx;
		color: #333333;
	}

	.back {
		position: absolute;
		left: 56rpx;
		top: 44rpx;
		width: 48rpx;
		height: 76rpx;
	}

	.wrapper {
		padding: 30rpx;
	}

	.cont {
		width: 100%;
		margin-top: 30rpx;
	}

	.phone-display {
		position: relative;
		width: 100%;
		height: 196rpx;
		border-radius: 4rpx;
		background-color: white;
		border: 2rpx solid #F0F0F0;
		margin: 0 auto 64rpx auto;
	}

	.phone-display image {
		position: absolute;
		left: 64rpx;
		top: 48rpx;
		width: 68rpx;
		height: 68rpx;
	}

	.phone-display input {
		position: absolute;
		border: 0px;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding-left: 168rpx;
		font-size: 64rpx;
		background-color: white;
	}

	.codeTip {
		margin: auto;
		background-color: #F6F6F6;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		text-align: center;
		padding: 20rpx 20rpx;
		display: flex;
		flex-direction: column;
	}

	.codeTip text {
		font-size: 30rpx;
		color: #666666;
		line-height: 1.6;
	}

	.input-row {
		position: relative;
		width: 100%;
		height: 92rpx;
		border-radius: 4rpx;
		background-color: white;
		border: 2rpx solid #F0F0F0;
		margin: 0 auto 64rpx auto;
	}

	.input-icon {
		position: absolute;
		left: 26rpx;
		top: 24rpx;
		width: 46rpx;
		height: 46rpx;
		z-index: 1;
	}

	.input-row input {
		position: absolute;
		border: 0px;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding-left: 128rpx;
		padding-right: 200rpx;
		font-size: 32rpx;
		background-color: white;
	}

	.verify-btn {
		padding: 0 14rpx;
		height: 57rpx;
		border: 2rpx solid #37A962;
		color: #37A962;
		font-size: 32rpx;
		position: absolute;
		right: 26rpx;
		top: 22rpx;
		border-radius: 4rpx;
		background-color: white;
		line-height: 57rpx;
		text-align: center;
		display: flex;
		align-items: center;

		&:disabled {
			color: #cccccc;
			border-color: #cccccc;
		}
	}

	.change_nex {
		width: 100%;
		height: 108rpx;
		border: 0px;
		border-radius: 10rpx;
		overflow: hidden;
		margin: 56rpx 0;
		color: white;
		font-size: 38rpx;
		// background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
		line-height: 108rpx;
		text-align: center;
		background-size: contain;
		background-repeat: no-repeat;

		&:disabled {
			background: #cccccc;
		}

		&:active {
			// background: linear-gradient(135deg, #e55a2e 0%, #de821a 100%);
		}
	}

	.font15 {
		font-size: 30rpx;
	}
</style>